<template>
	<view class="uni_box">
		<view class="newcontent">
			<!-- 头部 -->
			<Nheader @leftClick="leftClick" @connectWallet="connectWallet" :cont="cont" @gettantwo="gettantwo"></Nheader>
			<view class="content">
				<view class="quannav">
					<image class="honebg" src="/static/new/quanbg.png" />
					<view class="qnavitem">
						<text class="onetit">{{$t('i.根据团队推荐值占比分红全网盈利')}}</text>
						<text class="twotit">{{$t('i.推荐')}}</text>
						<!-- <text class="threetit">{{$t('i.邀请一个人进行首次购买')}}</text>
						<text class="threetit">{{$t('i.您将立即享受永久交易股息')}}</text> -->
					</view>
				</view>
				<!-- <view class="gonggao">
					<image class="gongicon" src="/static/new/gong.png" />
					<u-notice-bar style="height: 100%;width: 90%;" mode="horizontal" :volume-icon="false" font-size="24" color="#F40002" :list="nlist" bg-color="none" ></u-notice-bar>
				</view> -->
				<view class="mquan">
					<text class="mqname">{{$t('i.我的权重值')}}</text>
					<view class="zhnav">
						<text class="znum">{{myweight}}</text>
						<view class="qright">
							<text>{{$t('i.累积排名')}} {{rank}}</text>
							<text>{{$t('i.持股')}} {{weightpercent||''}}%</text>
						</view>
					</view>
				</view>
				<view class="bang">
					<view class="bone">
						<view class="boitem " :class="bang==1?'bactive':''" @click="getbang(1)">{{$t('i.日榜')}}</view>
						<view class="boitem" :class="bang==2?'bactive':''" @click="getbang(2)">{{$t('i.周榜')}}</view>
						<view class="boitem" :class="bang==3?'bactive':''" @click="getbang(3)">{{$t('i.月榜')}}</view>
					</view>
					<view class="pai">
						<view class="one hname">{{$t('i.排名')}}</view>
						<view class="two hname">{{$t('i.地址')}}</view>
						<view class="three hname">{{$t('i.权重值')}}</view>
						<view class="four hname">{{$t('i.持股')}}%</view>
					</view>
					<view class="pai" v-for="(item,index) in newdata.rankingData" :key="index">
						<view class="one hmiao" :class="item.rank<=3?'flex-row':''">
							<image class="oneicon" v-if="item.rank==1" src="/static/new/one.png" />
							<image class="oneicon" v-else-if="item.rank==2" src="/static/new/two.png" />
							<image class="oneicon" v-else-if="item.rank==3" src="/static/new/three.png" />
							<text class="hmiao" v-else>{{ item.rank }}</text>
						</view>
						<view class="two hmiaotwo txt">
							<!-- <text class="cheng" v-if="index == 0">0xdE116E83990xdE116E83990xdE116E8399</text>
							<text class="lv" v-else-if="index == 1">0xdE116E83990xdE116E83990xdE116E8399</text>
							<text class="hong" v-else-if="index == 2">0xdE116E83990xdE116E83990xdE116E8399</text> -->
							<text class="" @click="copyAddr(item.realAddress)" >{{item.userAddress}}</text>
						</view>
						<view class="three hmiaotwo txt">
							<text class="">{{item.totalAmount}}</text>
						</view>
						<view class="four hmiaotwo txt">
							<text class="">{{getjisuan(item.totalAmount, totalWeight)+'%'}}</text>
						</view>
					</view>
					<u-empty v-if="newdata&&!newdata.rankingData||newdata.rankingData==''" :text="$t('i.暂无数据')" mode="list" style="margin-top: 10px;"></u-empty>
				</view>

				<text class="qzjl">{{$t('i.权重值记录')}}</text>
				<view class="bang">
					<view class="pai">
						<view class="one hname">{{$t('i.序号')}}</view>
						<view class="two hname">{{$t('i.日期')}}</view>
						<view class="three hname">{{$t('i.金额')}}</view>
						<view class="four hname">{{$t('i.增值')}}</view>
					</view>
					<view class="pai" v-for="(item,index) in events" :key="index">
						<view class="one hmiao" :class="index<=2?'flex-row':''">
							<text class="hmiao">{{ index+1 }}</text>
						</view>
						<view class="two hmiaotwo txt">
							<text class="">{{ formatTimestamp(item.timestamp) }}</text>
						</view>
						<view class="three hmiaotwo txt">
							<text class="">{{item.amountBuyU}}</text>
						</view>
						<view class="four hmiaotwo txt">
							<text class="" :class="item.amount<0?'lv':item.amount>=0?'hong':''">{{ item.amount<0?item.amount:item.amount }}</text>
						</view>
					</view>
					
					<u-empty v-if="!events||events==''" :text="$t('i.暂无数据')" mode="list" style="margin-top: 10px;"></u-empty>
					<view class="next" v-else-if="status == 'loadmore'">
						<view class="nextitem" @click="getnext">{{$t('i.加载更多')}}...</view>
					</view>
					<view class="next" v-else-if="status == 'nomore'">
						<text class="nomoretit">{{$t('i.没有更多了')}}</text>
					</view>
				</view>

				<text class="qzjl">{{$t('i.推荐列表')}}</text>
				<view class="bang">
					<view class="pai">
						<view class="one hname">{{$t('i.序号')}}</view>
						<view class="two hname">{{$t('i.地址')}}</view>
						<view class="three hname">{{$t('i.投资')}}</view>
						<view class="four hname">{{$t('i.权重值')}}</view>
					</view>
					<view class="pai" v-for="(item,index) in tuilist" :key="index">
						<view class="one hmiao" :class="index<=2?'flex-row':''">
							<text class="hmiao">{{ index+1 }}</text>
						</view>
						<view class="two hmiaotwo txt" @click="copyAddr(item.address)">
							<text class="">{{ cutmyAddr(item.address) }}</text>
						</view>
						<view class="three hmiaotwo txt">
							<text class="">{{parseFloat(item.totalInvestment.toFixed(2))}}</text>
						</view>
						<view class="four hmiaotwo txt">
							<text class="">{{ parseFloat(item.height.toFixed(6)) }}</text>
						</view>
					</view>
					<u-empty v-if="!tuilist||tuilist==''" :text="$t('i.暂无数据')" mode="list" style="margin-top: 10px;"></u-empty>
				</view>
				
			</view>
		</view>
</view>
</template>

<script>
import { connectMetamask, getWeight } from "@/utils/dapp.js"
import { defaultTo, path, take, takeLast } from "ramda"
import { DateTime } from 'luxon'
import tryCatch from "ramda/src/tryCatch"
import { ethers } from "ethers"
import Nheader from '@/components/Nheader/Nheader'
export default {
	data() {
		return {
			bgcolor: '#fff',
			checked: false,
			border: false,
			type: '1',
			show: false,
			keywords: '',
			list: [],
			hbg: '#0d0e0f',
			cont: '',
			typeindex: 0,
			lp_amount:"",
			totalIn:0,
			alreadyPaid:0,
			in_percent:0,
			earned:0,
			iszhan: false,
			zhaninfo: {},
			applist: [],
			lshow: false,
			zshow: false,
			yuyan:'zh',
			status:1,
			myweight: 0,
			totalWeight: 1,
			weightpercent: '0',
			head:1,
			nlist: [
				this.$t('i.yao')
				// '邀请好友首次购买可获得全网永久占比交易流水分红，邀请越多，权重值越高，分红越多',
			],
			bang:1,//1日榜 2周榜 3月榜
			daily:[],
			weekly:[],
			monthly:[],
			events:[],
			newdata:{
				rankingData:[]
			},
			user:{},
			rank:0,
			tuilist:[],
			pageSize:10,
			page:1,
			pagination:{

			},
			limit: 10,
			last_page: 1,
			status: "loadmore",

		}
	},
	components: {
		Nheader
	},
	computed: {
	},

	mounted() {

	},
	async onLoad() {
		
		const iv = await getWeight()
		console.log(iv)
		this.myweight = parseFloat(Number(iv.bal).toFixed(6))
		this.weightpercent = (Number(iv.bal) * 100 / Number(iv.total)).toFixed(2)

	},
	async onShow() {
		if(uni.getStorageSync('locale')){
			this.yuyan = uni.getStorageSync('locale')
		}
		 uni.setTabBarItem({
			index: 0,
			text: this.$t('i.首页')
		})
		uni.setTabBarItem({
			index: 1,
			text: this.$t('i.市值')
		})
		uni.setTabBarItem({
			index: 2,
			text: this.$t('i.权重榜')
		})
		console.log(uni.getStorageSync('cont'))
		if(uni.getStorageSync('cont')){
			this.cont = uni.getStorageSync('cont')
		}
		this.getlist()
		this.getjifen();//查询用户积分
		this.gettui()
	},
	onReachBottom: function () {
	},
	methods: {
		async getjifen(){
			const address = await connectMetamask()
			let res = await this.$u.api.userpoints({address});
			console.log(res)
			this.user = res.user
			this.rank = res.user.rank
		},
		async getlist(){
			const address = await connectMetamask()
			const iv = await getWeight()
			this.totalWeight = iv.total
			let res = await this.$u.api.weightrankings({
				address:address,
				page:this.page,
				pageSize:this.pageSize
			});
			this.daily = res.daily // 日
			this.weekly = res.weekly // 周
			this.monthly = res.monthly // 月
			
			this.getnewdata()
			// this.events = res.events // 权重值
			this.pagination = res.pagination
			// console.log(res)
			let list = res.events;
			if(res.pagination&&res.pagination.totalPages){
				this.last_page = res.pagination.totalPages
			}
			this.events = this.page == 1 ? list : [...this.events, ...list];	
			if(res.events==''||Number(this.page)>=Number(this.last_page)){
				this.status = 'nomore';
			}else{
				this.status = 'loadmore';
			}
		},
		getnext(){
			if(this.status == 'loadmore'){
				this.page++
				this.getlist();
			}
		},
		async gettui(){
			const address = await connectMetamask()
			let res = await this.$u.api.childrenusers({address});
			
			this.tuilist = res.users // 推荐列表
		},

		getnewdata(){
			if(this.bang == 1){
				this.newdata = this.daily||{
					rankingData:[]
				}
			}else if(this.bang == 2){
				this.newdata = this.weekly||{
					rankingData:[]
				}
			}else if(this.bang == 3){
				this.newdata = this.monthly||{
					rankingData:[]
				}
			}
		},
		copyAddr(addr){
			uni.setClipboardData({
				data: addr,
				success: function() {
					uni.showToast({
						title: 'copied',
					});
				}
			});
		},
		getjisuan(dividend, divisor){
			console.log({dividend, divisor})
			const percentage = Number(((dividend / divisor) * 100).toFixed(2));
  			return percentage;
		},
		/**
		 * 将时间戳转换为 "YYYY.MM.DD HH:MM" 格式的时间字符串
		 * @param {number} timestamp - 10位时间戳（单位：秒）
		 * @returns {string} 格式化后的时间字符串（如 "2025.10.20 15:45"）
		 */
		formatTimestamp(timestamp) {
		// 时间戳为秒，需转为毫秒传入 Date 对象
		const date = new Date(timestamp * 1000);
		// 获取年、月、日（月需+1，因默认从0开始）
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0'); // 补0为两位数（如 10→10，9→09）
		const day = String(date.getDate()).padStart(2, '0');
		// 获取时、分
		const hours = String(date.getHours()).padStart(2, '0');
		const minutes = String(date.getMinutes()).padStart(2, '0');
		// 拼接为目标格式
		return `${year}.${month}.${day} ${hours}:${minutes}`;
		},
		getbang(e){
			this.bang = e
			this.getnewdata()
		},
		getyuyin(e) {
			this.yuyan = e
			this.switchLang(this.yuyan)
		},
		switchLang(e) {
			this.$i18n.locale = e
			// console.log(this.$i18n.locale)
			uni.setStorageSync('locale', e)
			this.zshow = false
			// this.$store.commit('getwen');
		},
		gettantwo(){
			if(!this.zshow){
				this.zshow = true 
			}else{
				this.zshow = false 
			}
			
		},
		getqie(){
			if(this.status == 1){
				this.status = 2
			}else if(this.status == 2){
				this.status = 1
			}
		},
		gethead(e){
			this.head = e
		},
		cutmyAddr(addr){
			return take(7, addr) + '...' + takeLast(5, addr) + ' '
		},
		async connectWallet() {
			this.cont = '234'
			uni.setStorageSync('cont',this.cont)
			console.log(this.cont)
			this.$forceUpdate()
			return;
			const addr = await connectMetamask()
			console.log(addr)
			if (typeof addr === 'string') {
				this.cont = take(5, addr) + '...' + takeLast(3, addr) + ' '
				uni.setStorageSync('cont',this.cont)
			}
		},



	}
}
</script>

<style lang="scss" scoped>
page,
html {}

.newcontent {
	min-height: 100vh;
	background-color: #22262F;
	.quannav{
		width: 100%;
		height: 300rpx;
		position: relative;
	}
	.honebg{
		width: 100%;
		height: 100%;
		position: absolute;
	}
	.qnavitem{
		position: relative;
		display: flex;
		flex-direction: column;
		padding: 30rpx 40rpx;
		height: 100%;
		justify-content: center;
		.onetit{
			font-weight: bold;
			font-size: 14px;
			color: #F8FAFC;
			line-height: 14px;
		}
		.twotit{
			font-weight: bold;
			font-size: 14px;
			color: #39CC77;
			line-height: 16px;
			margin-bottom: 10rpx;
			display: block;
			margin-top: 8rpx;
		}
		.threetit{
			font-weight: 400;
			font-size: 12px;
			color: #94A3B8;
			display: inline-block;
			max-width: 70%;
			line-height: 16px;

		}
	}
	.gonggao{
		background: rgba(244,0,2,0.15);
		border-radius: 0px 0px 0px 0px;
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10rpx 30rpx;
		/deep/.u-notice-bar{
				padding: 0 !important;
			}
		.gongicon{
			width: 40rpx;
			height: 36rpx;
			margin-right: 10rpx;
		}
	}
	.mquan{
		display: flex;
		flex-direction: column;
		padding: 60rpx 50rpx;
		.mqname{
			font-weight: 400;
			font-size: 24rpx;
			color: #94A3B8;
		}
		.zhnav{
			display: flex;
			flex-direction: row;
			align-items: center;
			.znum{
				font-weight: 400;
				font-size: 28px;
				color: #F8FAFC;
			}
			.qright{
				display: flex;
				flex-direction: column;
				margin-left: auto;
				text{
					font-weight: 400;
					font-size: 12px;
					color: #39CC77;
				}
			}
		}
	}
	.bang{
		padding: 30rpx;
		background: #2B313D;
		border-radius: 16px 16px 16px 16px;
		margin: 20rpx;
		.bone{
			height: 32px;
			background: #2B313D;
			border-radius: 12rpx;
			border: 1px solid rgba(130,138,153,0.4);
			display: flex;
			flex-direction: row;
			margin-bottom: 40rpx;
			.boitem{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 400;
				font-size: 14px;
				color: #FFFFFF;
				border-radius: 10rpx;
			}
			.bactive{
				background: #39CC77;
				color: #fff;
			}
		}
		.pai{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 20rpx 0;
			.one{
				width: 20%;
			}
			.two{
				width: 30%;
			}
			.three{
				width: 25%;
			}
			.four{
				width: 25%;
			}
			.hmiao{
				font-weight: 400;
				font-size: 12px;
				color: #FFFFFF;
				display: inline-block;
				text-align: center;
				max-width: 90%;
				
			}
			.hmiaotwo{
				font-weight: 400;
				font-size: 12px;
				color: #94A3B8;
				display: inline-block;
				text-align: center;
				max-width: 90%;
			}
			.flex-row{
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.oneicon{
				width: 60rpx;
				height: 40rpx;
			}
			.hname{
				font-weight: 400;
				font-size: 14px;
				color: #FFFFFF;
				display: block;
				text-align: center;
			}
			.hong{
				color: #FF7171;
			}
			.lv{
				color: #39CC77;
			}
			.cheng{
				color: #FE9605;
			}
			
		}
	}
	.duiview{
		margin: 20rpx;
		background: #2B313D;
		border-radius: 32rpx;
		.duione{
			display: flex;
			flex-direction: row;
			border-bottom: 2rpx solid #22262F;
			padding: 20rpx 0rpx 0;
			margin: 0 30rpx;
			.duiitem{
				min-width: 190rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				.dname{
					font-weight: bold;
					font-size: 32rpx;
					color: #828A99;
					display: inline-block;
					margin-bottom: 20rpx;
				}
				.heng{
					height: 8rpx;
					position: absolute;
					bottom: 0;
					left: 0;
					display: none;
					width: 100%;
					background: #39CC77;
					border-radius: 0px 0px 0px 0px;
				}
			}
			.dactive{
				.heng{
					display: inline-block;
				}
				.dname{
					color: #F8FAFC;
				}

			}
		}

		.duitwo{
			padding:40rpx 30rpx 40rpx;
			.uone{
				display: flex;
				flex-direction: row;
				align-items: center;
				.usdt{
					width: 48rpx;
					height: 48rpx;
					margin-right: 10rpx;
				}
				.uname{
					font-weight: 400;
					font-size: 32rpx;
					color: #F8FAFC;
				}
				.xia{
					width: 20rpx;
					height: 16rpx;
					margin-left: 10rpx;
					position: relative;
					top: 3rpx;
				}
				.yue{
					font-weight: 400;
					font-size: 24rpx;
					color: #828A99;
					margin-left: auto;
				}
			}
			.utwo{
				padding: 20rpx;
				border-radius: 32rpx;
				background: #22262F;
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;
				.shuru{
					font-size: 30rpx;
					color: #fff;
				}
				/deep/.uni-input-input {
					color: #fff;
				}
				.shubiao{
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-end;
					margin-top: 6rpx;
					.bq{
						padding: 2rpx 15rpx;
						border-radius: 50rpx;
						border: 2rpx solid #EEA933;
						margin-left: 10rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #EEA933;
					}
				}
			}
			.jiaview{
				display: flex;
				margin-top: 20rpx;
				align-items: center;
				flex-direction: row;
				.jianame{
					font-weight: 400;
					font-size: 24rpx;
					color: #828A99;
				}
			}
			
		}
		.qieicon{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			.qie{
				width: 54rpx;
				height: 54rpx;
				
			}
		}
	}
	.duihuan{
		position: fixed;
		bottom: 100rpx;
		width: 100%;
		display: flex;
		// background-color: rgb(18, 26, 38);
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		.duibtn{
			width: 90%;
			height: 88rpx;
			background: #39CC77;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;

		}
	}
	.content{
		position: relative;
		padding-bottom: 230rpx;
	}
	.mban{
		width: 100%;
		height: 100%;
		// margin: -30px auto 0;
		position: absolute;
		top: 0;
		min-height: 100vh;

	}
	.twen{
		margin: 80rpx 50rpx 30rpx;
		.wentit{
			color: #fff;
			font-size: 28px;
			font-weight: 600;
			display: block;
			text-align: center;
		}
		.wenmiao{
			font-size: 12px;
			color: #fff;
			opacity: 0.5;
			font-weight: 400;
			display: block;
			text-align: center;
			margin: 30rpx 0 20rpx;
		}
		.adress{
			background-color: #FFFFFF1A;
			width: 100%;
			display: inline-block;
			align-items: center;
			text-align: center;
			justify-content: center;
			padding: 10rpx;
			border-radius: 4px;
			color: #fff;
			font-size: 12px;
			font-weight: 400;
			white-space: nowrap;
			/* 3. 隐藏超出容器的文本内容 */
			overflow: hidden;
			/* 4. 用省略号替代超出的文本 */
			text-overflow: ellipsis;
		}
	}
	.Frame2{
		width: 100%;
		height: 200px;
		position: relative;
	}
	.gouview{
		position: relative;
		display: flex;
		flex-direction: row;
		padding: 0 40rpx;
		margin-top: -63px;
		margin-bottom: 30rpx;
		.gouitem{
			width: 48%;
			height: 200px;
			background-color: rgba(255,255,255,0.1);
			border: 2px solid rgba(255,255,255,0.35);
			border-radius: 30rpx;
			position: relative;
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			.dajie{
				font-size: 14px;
				color: rgba(255,255,255,0.75);
				display: block;
				margin-bottom: 4px;
			}
			.danum{
				color: #fff;
				font-size: 14px;
				font-weight: 400;
				.usdt{
					font-size: 28px;
					font-weight: 500;
					display: inline-block;
					margin-right: 6px;
				}
			}
			.rengou{
				margin-top: auto;
				width: 100%;
				background-color: rgba(255,255,255,0.1);
				border-radius: 10rpx;
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: rgba(255,255,255,0.5);
			}
			.gou{
				background-color: #FFA100;
				color: #000;

			}
		}
		
	}
}
/deep/.u-mode-center-box{
	background-color: transparent;
}
.yupop{
	// width: 120px;
	// min-width: 140px;
	// position: absolute;
	// top: 58px;
	// right: 30rpx;
	// background-color: rgba(51, 51, 51, 0.802);
	// z-index: 100;
	// border-radius: 30rpx;
	// display: flex;
	// flex-direction: column;
	// padding: 10rpx 0;
	background: #1C222E;
	border-radius: 40rpx;
	padding: 40rpx;
	.yuhead{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 40rpx;
		.qiehead{
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
		}
		.cha{
			margin-left: auto;
			width: 48rpx;
			height: 48rpx;
		}
	}
	.popitem{
		height: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 20px;
		justify-content: center;
		position: relative;
		background: rgba(255,255,255,0);
		border-radius: 40rpx;
		border: 1px solid #FFFFFF;
		margin-bottom: 15rpx;
		.ptit{
			color: #fff;
			font-size: 30rpx;
			font-weight: 400;
			display: inline-block;
			width: 145rpx;
		}
		.gou{
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}
	}
	.pactive{
		background: #39CC77;
		border: 1px solid #39CC77;
		.gou{
			display: inline-block;
		}
		.ptit{
			color: #fff;
		}
	}
}

.kuaisu{
	font-weight: 500;
	font-size: 32rpx;
	color: #FFFFFF;
	display: block;
	margin: 30rpx 30rpx 0;
}
.jifen{
	display: flex;
	flex-direction: row;
	align-items: center;
	border: 2rpx solid #4D5461;
	padding: 30rpx;
	background: #22262F;
	border-radius: 20rpx;
	margin: 30rpx 20rpx;
	.jinav{
		display: flex;
		flex-direction: column;
	}
	.qianbao{
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}
	.jiname{
		font-weight: 400;
		font-size: 24rpx;
		color: #828A99;
	}
	.jinum{
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.ricon{
		margin-left: auto;
		width: 32rpx;
		height: 32rpx;
	}
}
.qzjl{
	font-weight: bold;
	font-size: 16px;
	color: #FFFFFF;
	display: block;
	margin: 30px 15px 20px;
}
.next{
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 20rpx 0;
	.nextitem{
		padding: 8rpx 30rpx;
		border-radius: 50rpx;
		border: 1rpx solid #eee;
		color: #eee;
		font-size: 26rpx;
		font-weight: normal;
	}
}
.nomoretit{
	display: block;
	text-align: center;
	color: #999;
	font-size: 28rpx;
	font-weight: normal;
}
</style>
